<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Websocket聊天室</title>
</head>
<body>
<script type="text/javascript">
    // 执行建立连接方法
    connect()

    // 发送数据
    function send(message) {
        // 如果socket没有创建好
        if (window.socket == null) {
            alert("请加入聊天室后再发送消息")
            return
        }
        if (message == null || message.trim() === "") {
            document.getElementById('input-msg').value = ''
            alert("请数据内容后再发送！")
            return;
        }
        if (window.socket.readyState === WebSocket.OPEN) {
            window.socket.send(message)
            document.getElementById('input-msg').value = ''
        } else {
            alert("WebSocket 连接没有建立成功！")
        }
    }

    // 断开连接
    function disconnect() {
        // 如果socket没有创建好
        if (window.socket == null) {
            return
        }
        window.socket.close()
        window.socket = null
    }

    // 建立连接
    function connect() {
        if (window.socket != null && window.socket.readyState === WebSocket.OPEN) {
            alert("连接已建立，无需重复建立连接！")
            return
        }
        // 判断当前浏览器是否支持webSocket
        if (window.WebSocket) {
            // 创建WebSocket
            let socket = new WebSocket("ws://localhost:8089/chat")
            // 收到消息时的回调
            socket.onmessage = function (event) {
                const ta = document.getElementById('responseText')
                ta.value += event.data + "\r\n"
            }
            // 建立连接成功的回调
            socket.onopen = function (event) {
                const ta = document.getElementById('responseText')
                ta.value += "您已加入聊天室！可以发送消息了....\r\n"
            }
            // 断开连接的回调
            socket.onclose = function (event) {
                const ta = document.getElementById('responseText')
                ta.value += "您已离开聊天室....\r\n"
                window.socket = null
            }
            // 将 socket 设置到 全局的 window 对象中
            window.socket = socket
        } else {
            alert("您的浏览器不支持WebSocket协议！")
        }
    }
</script>
<form onsubmit="return false" name="">
    <input type="button" value="加入聊天室" onclick="connect()"/>
    <input type="button" value="离开聊天室" onclick="disconnect()"/>
    <h3>请输入消息</h3>
    <input id="input-msg" type="text" name="message" placeholder="输入消息"/>
    <input type="button" value="发送消息" onclick="send(this.form.message.value)"/>
    <input type="button" value="清空聊天内容" onclick="this.form.responseText.value=''">
    <hr/>
    <h3>当前聊天室内容</h3>
    <textarea id="responseText" name="responseText" style="width: 1024px;height: 300px;"></textarea>
</form>
</body>
</html>
